<template>
  <Row :gutter="16">
    <Col span="8">
      <Card>
        <div class="card-header">当前BMI指数</div>
        <div class="card-value">25.3</div>
        <Tag color="warning" class="mt-2">过重</Tag>
        <div class="card-desc mt-2">较上周下降了0.5，继续保持！</div>
      </Card>
    </Col>
    <Col span="8">
      <Card>
        <div class="card-header">本周锻炼目标</div>
        <div class="card-value">86%</div>
        <Progress percent="86" stroke-width="6" class="mt-2" />
        <div class="card-desc mt-2">5/7天</div>
      </Card>
    </Col>
    <Col span="8">
      <Card>
        <div class="card-header">今日步数</div>
        <div class="card-value">7,532</div>
        <Tag color="info" class="mt-2">进行中</Tag>
        <div class="card-desc mt-2">距离目标10,000步还有2,468步</div>
      </Card>
    </Col>
  </Row>
</template>

<script>
export default {
  name: 'DataCards'
}
</script>

<style lang="less" scoped>
.card-header {
  color: #8392a5;
  font-size: 14px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  margin: 10px 0;
  color: #1f2d3d;
}

.card-desc {
  font-size: 12px;
  color: #8392a5;
}
</style>
